/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput } from 'react-native';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

import SplashScreen from 'react-native-splash-screen';


/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Power_Login extends PageBase {
	constructor(props){
		super(props);
		this.state = {
			input_style:{
				check_input:0,
				ac_style:"1 solid #009900",
				default_style:'1 solid #eee',
			},

			post_data:{
				username:"",
				password:"",
			},

        };
	}
	
	/************************************************************************************ Life */
	/**
	 * willMount
	 */
    componentWillMount(){
		setTimeout(()=>{
			SplashScreen.hide();
		},2000);
	}

	/**
	 * willMount
	 */
	componentDidMount(){
	}
	
	/**
	 * 选择输入框  改变下方border的颜色
	 */
	checkInput = (val) => {
		let input_style = this.state.input_style;
		input_style.check_input = val;
		this.setState({
			input_style:input_style
		});
	}

	/**
	 * 修改post_data  input值
	 */
	inputText = (filed, text) => {
		let post_data = this.state.post_data;
		post_data[filed] = text;
		this.setState({
			post_data:post_data,
		});
	}

	/**
	 * 登录
	 */
	login = (e) => {
		let post_data = this.state.post_data;
		if(post_data['username'] == "" || post_data['password'] == ""){
			Dialog.text("帐号和密码不能为空");
			return;
		}
		Http.post({
			url: 'page/login/logic/login.php',
			data: post_data,
			success: (data)=> {
				Dialog.text("登录成功");
			},
			error : (res) => {
				Dialog.text(res.msg);
				return;
			},
			pipe: Config.pipe.action.default
		})
	}

	/************************************************************************************ Render */
	render() {
		return (
			<CPage>
				<CScroll bg='#fff'>

					<CRow mx="20" f='1' my="50" y='center'>
						<CRow f="0.6">
							<CText size="50">物流派件登录</CText>
						</CRow>
						<CRow f="0.4" x="right">
							{/* <CText color="#090" size="32">注册</CText> */}
						</CRow>
					</CRow>

					<CItemX mx="20" f='1' 
					bb={ this.state.input_style.check_input == 1 ? this.state.input_style.ac_style : this.state.input_style.default_style }
					>
						<CRow f="0.2" h="100"><CText size="32">帐号</CText></CRow>
						<CRow f="0.8" h="100"
						><TextInput 
						placeholder="请输入您的用户名/手机" 
						style={{ fontSize:16 }} 
						clearTextOnFocus={true}
						defaultValue={ this.state.post_data.username }
						onChangeText={
							(text) => {
								this.inputText('username', text);
							}
						}
						/></CRow>
					</CItemX>

					<CItemX mx="20" f='1' 
					bb={ this.state.input_style.check_input == 2 ? this.state.input_style.ac_style : this.state.input_style.default_style }
					>
						<CRow f="0.2" h="100"><CText size="32">密码</CText></CRow>
						<CRow f="0.8" h="100"><TextInput 
						placeholder="请输入您的密码" 
						style={{ fontSize:16 }} 
						clearTextOnFocus={true}
						defaultValue={ this.state.post_data.password }
						onChangeText={
							(text) => {
								this.inputText('password', text);
							}
						}
						/></CRow>
					</CItemX>


					<CItemX mx="20" f='1' mt="100">
						<CButton f="1" bg="green" py="20"
						onPress={
							(e) => {
								this.login();
							}
						}
						>
							<CText color="#fff" size="36">登录</CText>
						</CButton>
					</CItemX>





				</CScroll>

                {/* 底部 */}
                <CFooter h='96' y='center' bg='#fff'>
					{/* <CItemX mx="20" f='1' mb="20">
						<CRow f="1" x="center">
							<CText color="#3366FF" size="32">找回密码</CText>
						</CRow>
					</CItemX> */}
                </CFooter>
                {/* 底部 */}


			</CPage>
		);
	}
}
